<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 绘制图形</title>
    <style>
      body{
        background: #666;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      canvas{
        background: #fff;
      }
      a{
        color: #fff;
        font-size: 24px;
      }
    </style>
</head>
<body>
    <!-- 
      
    -->
    <ul>
      <li><a href="#绘制图形">绘制图形</a></li>
    </ul>
    <div>
      <a id="绘制图形"></a>
      <h1>绘制图形</h1>
      <canvas id="canvas1" width="500" height="500"></canvas>
      <script>

        const drawLine = () => {
          ctx.save();
          ctx.beginPath();
          ctx.moveTo(250, 0);
          ctx.lineTo(250, 500);
          ctx.moveTo(0, 250);
          ctx.lineTo(500, 250);
          ctx.strokeStyle = '#999';
          ctx.stroke();
          ctx.closePath();
          ctx.restore();
        }

        const drawText = (
          str,
          x, y,
          fontSize = 50, 
          width = 300
        ) => {
          ctx.font = `${fontSize}px bold 宋体`
          while(ctx.measureText(str).width > 300) {
            fontSize--
            ctx.font = `${fontSize}px bold 宋体`
          }
          ctx.textAlign = 'center'
          ctx.textBaseline = 'middle'

          ctx.fillStyle = 'red'
          ctx.fillText(str, x, y)
        }


        let oCanvas = document.getElementById('canvas1')
        let ctx = oCanvas.getContext('2d'); //拿到画笔

        drawLine()

        let img = new Image()
        img.src = './logo.png'

        img.onload = () => {
          // 如果只传递 3 个参数
          // ctx.drawImage(
          //   img,      // 图形
          //   150, 180  // 坐标
          // )

          // 如果传递 5 个参数
          // ctx.drawImage(
          //   img, // 图形
          //   150, 150, // 坐标
          //   300, 150, // 绘制后的图像大小
          // )

          // 如果传递 9 个参数: 裁剪
          ctx.drawImage(
            img,
            0, -20, // 裁剪坐标
            150, 150, // 裁剪的尺寸

            150, 150,// 坐标
            150, 150, // 图像大小
          )

        }


      </script>
    </div>
</body>
</html>
